<template>
    <div>
        <a-paging
            v-model:pageSize="pageSize"
            v-model:pageIndex="pageIndex"
            :totalCount="totalCount"
        ></a-paging>
        <pre class="language-html"><code>{{ `<a-paging
    v-model:pageSize="pageSize"
    v-model:pageIndex="pageIndex"
    :totalCount="totalCount"
></a-paging>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `export default {
    data() {
        return {
            pageSize: 10,
            pageIndex: 1,
            totalCount: 50,
        }
    },
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            pageSize: 10,
            pageIndex: 1,
            totalCount: 50,
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'pageSize', remark: '每页展示的数据条数', type: 'number', default: '10' },
                        { name: 'pageIndex', remark: '页码，从1开始', type: 'number', default: '1' },
                        { name: 'totalCount', remark: '数据总条数', type: 'number', default: '0' },
                        { name: 'pageSizeItems', remark: '可供选择的pageSize，会自动添加传进来的pageSize', type: 'number', default: '[10, 20, 50, 100]' },
                    ],
                },
                {
                    name: 'emits',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'params', text: '参数' },
                    ],
                    dataList: [
                        { name: 'update:pageSize', remark: '每页展示的数据条数发生变化', params: 'number' },
                        { name: 'update:pageIndex', remark: '页码发生变化', params: 'number' },
                    ],
                }
            ]
        }
    },
}
</script>